// 全局指令定制
import { useIntersectionObserver } from '@vueuse/core'
// 插件定义
export default {
  install (app) {
    console.log('插件被注册了', app)
    // app.directive编写指令
    app.directive('img-lazy', {
      // 等价于inserted 指令绑定的元素渲染完毕之后自动执行
      mounted (el, binding) {
        // el: 指令绑定的元素
        // binding: binding.value  指令等于号后面表达式的值
        // 编写懒加载的核心逻辑
        // 监控一下图片是否进入视口区域 如果进来就发送请求
        // 1. 如何知道图片进入视口  vueUse
        // 2. img.src
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 布尔值 true代表当前监听的元素进入到视口区域 false代表当前的元素离开了视口区域
            console.log(isIntersecting)
            // 监听回调 会在监听元素进入出去之后来回执行 并不会停止
            // 图片加载完毕一次之后 其实就可以停止监听 不需要它重复执行
            if (isIntersecting) {
              el.src = binding.value
              // 调用store函数彻底停止监听
              stop()
            }
          }
        )
      }
    })
  }
}
